<template>
	<view>
		<view class="head_bg">
			<!-- <view class="head_bg_box"></view> -->
			<image src="/static/imgs/mine/mine-bg.png" class="h-full w-full"></image>
		</view>
		<!-- <view class="income-setting-wrap w-full"></view> -->
		<view class="income-user-wrap w-full">
			<view class="flex px-4 justify-between">
				<view><image src="/static/logo.png" class="icon-img-50 rounded-full	"></image></view>
				<view class="ml-1 flex-1">
					<view class="text-color-white">laram</view>
				</view>
				<view>
					<view class="flex bg-color-red justify-center justify-items-center items-center p-1 rounded-xl">
						<view class="iconfont iconfont-extension icon-img"></view>
						<view class="text-white text-xs">推广赚钱</view>
					</view>
				</view>
			</view>
			<view class="flex justify-between flex-auto">
				<view class="w-full flex justify-center items-center">
					<view class="flex flex-col justify-center items-center">
						<view>51</view>
						<view>余额(元)</view>
					</view>
				</view>
				<view class="w-full flex justify-center items-center">
					<view class="flex flex-col justify-center items-center">
						<view>51</view>
						<view>优惠券</view>
					</view>
				</view>
			</view>
		
		</view>
		<view class="income-data-wrap flex flex-col justify-between">
			<view class="flex justify-between items-center p-2">
				<view>我的订单</view>
				<view>全部订单></view>
			</view>
			<view class="flex justify-between items-center p-2">
				<view class="flex flex-col justify-center items-center">
					<view>-</view>
					<view>待付款</view>
				</view>
				<view class="flex flex-col justify-center items-center">
					<view>-</view>
					<view>待收货</view>
				</view>
				<view class="flex flex-col justify-center items-center">
					<view>-</view>
					<view>待评价</view>
				</view>
				<view class="flex flex-col justify-center items-center">
					<view>-</view>
					<view>退款/售后</view>
				</view>
				<view class="flex flex-col justify-center items-center">
					<view>-</view>
					<view>全部订单</view>
				</view>
			</view>
		</view>
		<view class="income-service-wrap p-2">
			<view class="bg-white p-2">
				<view>我的服务</view>
				<view class="flex function-list">
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>收货地址</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>我的足迹</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>我的收藏</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>常见问题</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>在线客服</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>申请团长</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>团长中心</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>司机中心</view>
					</view>
					<view class="function-item flex flex-col justify-center items-center">
						<view>-</view>
						<view>意见反馈</view>
					</view>
				</view>
			</view>
			<view class="flex justify-center items-center"><image src="/static/imgs/home/tip-left.png" class="tip-img tip-img-left"></image>为你推荐<image src="/static/imgs/home/tip-right.png" class="tip-img tip-img-right"></image></view>
			<view class="sell-goods-list">
				<view class="sell-goods-item rounded-lg" v-for="item in goods">
					<image :src="item.logo"></image>
					<view class="price">
						<text>{{item.price}}</text>
						<text>￥2499</text>
					</view>
					<view class="name">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods:[{
					name:'商品一',
					price:'20.36',
					logo:'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				{
					name:'商品二',
					price:'23.36',
					logo:'https://cdn.uviewui.com/uview/album/2.jpg'
				},
				{
					name:'商品三',
					price:'20.36',
					logo:'https://cdn.uviewui.com/uview/album/3.jpg'
				},
				{
					name:'商品四',
					price:'23.36',
					logo:'https://cdn.uviewui.com/uview/album/4.jpg'
				}
				]
			};
		}
	}
</script>

<style lang="scss">
.head_bg{ width: 100%; height: 440rpx;  }
.income-setting-wrap{
	z-index: 1;
	position: absolute; 
	height: 100rpx; 
	margin-top: -304rpx;
}
.income-user-wrap{
	z-index: 1;
	position: absolute; 
	height: 200rpx; 
	margin-top: -400rpx; 
}
.income-data-wrap{
	z-index: 1; 
	position: absolute; 
	width: 92%; 
	height: 240rpx; 
	margin: -180rpx 4% 0 4%; 
	background: #fff; 
	//box-shadow: 0 4rpx 20rpx 0 #8A38F5; 
	border-radius: 10rpx; 
}
.income-service-wrap{
	z-index: 1;
	position: absolute; 
	margin-top: 90rpx; 
	//width: 100%;
	left: 0;
	right: 0;
}
.image-bg {
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.left-box{
	height: 90rpx;
	position: relative;
	flex: 1;
	z-index: 5;
	padding: 20rpx;
}
.right-box{
	height: 90rpx;
	position: relative;
    flex: 1;
    z-index: 5;
	margin-left: 10rpx;
	padding: 20rpx;
}
.function-list{
	padding: 30rpx;
	//background-color: #baf;
	// 设置父元素成为弹性盒
	display: flex;
	// 让弹性盒元素在必要的时候拆行
	flex-wrap: wrap;
	.function-item{
		//background-color: deeppink;
		height: 100rpx;
		// 每个元素都要设置右边距margin-right（每个元素的左右间隙）
		// 同时设置下边距margin-bottom（每个元素的上下间隙）
		margin: 0 20rpx 20rpx 0;
		width: calc((100% - 60rpx) / 4);   
		// 这里一行显示4个，所以是/4，一行显示几个就除以几 
		// 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整
		min-width: calc((100% - 60rpx) / 4);
		max-width: calc((100% - 60rpx) / 4);
		// 每行最右侧的那个不设置右外边距
		&:nth-child(4n + 4) {
			margin-right: 0;
		} 
	}
}
</style>
